﻿@model ProductDetail
@{
    ViewBag.Title = string.IsNullOrEmpty(Model.Title) ? Model.ProductName : Model.Title;
}
@section header{
    <meta name="keywords" content="@Model.Keywords" />
    <meta name="description" content="@Model.Description" />
    <link href="~/plugins/Swiper/dist/css/swiper.min.css" rel="stylesheet" />
}

<div class="wrapper">
    <header class="page-header">
        <div class="container-fluid">

            <a href="/" class="top-logo">
                <div class="text hidden-xs hidden-sm">
                    <h2> 品牌周边及礼品定制服务商</h2>
                    <p>Brand Peripherals &amp; Customized Gift Service</p>
                </div>
            </a>

            <div class="leftcol">
                <h1 class="title text-right">@Model.ProductName</h1>
                <p class="summary text-right ">
                    @Model.Description
                </p>
            </div>

        </div>
    </header>
    <main class="container-fluid product-detail">
        <div class="row">
            <div class="col-md-9  col-md-push-3">
                <div class="photo">
                    <!-- Swiper -->
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            @if (Model.Photos != null)
                            {
                                foreach (var item in Model.Photos)
                                {
                                    <div class="swiper-slide"><img src="@item" alt=""></div>
                                }
                            }
                        </div>
                        <!-- Add Pagination -->
                        <div class="swiper-pagination"></div>
                        <!-- Add Arrows -->
                        <div class="swiper-button-next"><i class="iconfont icon-next"></i></div>
                        <div class="swiper-button-prev"><i class="iconfont icon-prev"></i></div>
                    </div>


                </div>
            </div>
            <div class="col-md-3  col-md-pull-9">
                <div class="detail">
                    <aside class="leftdes">
                        <header class="hidden-xs hidden-sm">
                            <a href="@Url.Action("Index","Product")" class="back">
                                返回上级
                            </a>
                        </header>
                        <h3>@Model.ProductName / @Model.ProductNo</h3>
                        @Html.Raw(Model.Body)
                        @if (Model.HasTech)
                        {
                            <a class="more" href="@Url.Action("Technology",new { id=Model.Id})">
                                手机壳细节介绍
                            </a>
                        }

                    </aside>
                </div>
            </div>


        </div>
    </main>
</div>

<a href="@Url.Action("Index","Product")" class="fixedback hidden-md hidden-lg"><i class="iconfont icon-fanhui1"></i></a>



@section footer{
    <script src="~/plugins/Swiper/dist/js/swiper.jquery.min.js"></script>
    <script src="~/plugins/scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
    <script>
        //var initialization = function () {
        //    var winHeight = $(window).height(), headerHeight = $(".page-header").height(), footerHeight = $(".page-footer").height();
        //    var midHeight = (winHeight - headerHeight - footerHeight - 46);
        //    // var imgHeight = $(".photo img").height();

        //    //if (midHeight > imgHeight) {
        //    //    $(".photo .swiper-slide").css({ "height": imgHeight + "px" });
        //    //    $(".detail").css({ "height": imgHeight + "px" });
        //    //    var paddingTop = (midHeight - imgHeight) / 2;
        //    //    $(".product-detail").css({ "padding-top": paddingTop + "px" });
        //    //} else {
        //    $(".photo .swiper-slide").css({ "height": midHeight + "px" });
        //    $(".detail").css({ "height": midHeight + "px" });
        //    //}
        //}



        $(function () {

            //if (Modernizr.mq('(min-width: 992px)')) {
            //    initialization();
            //} else {
            //    $(".photo").css({ "height": "auto" });
            //    $(".detail").css({ "height": "auto" });
            //}

            //$(window).resize(function () {

            //    if (Modernizr.mq('(min-width: 992px)')) {
            //        initialization();
            //    } else {
            //        $(".photo").css({ "height": "auto" });
            //        $(".detail").css({ "height": "auto" });
            //    }

            //})

            $('.swiper-container').swiper({
                pagination: '.swiper-pagination',
                paginationClickable: true,
                nextButton: '.swiper-button-next',
                prevButton: '.swiper-button-prev',
            });

        });
        $(window).on("load", function () {
            $(".detail").mCustomScrollbar();
        });


    </script>

}
